<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label-width="120" :borderBottom="false" :labelStyle="labelStyle" label-position="top"
				label="帐户名称" prop="username">
				<u-input class="input" placeholder="请输入帐户名称" v-model="model.username" type="text"></u-input>
			</u-form-item>
			<u-form-item label-width="120" :borderBottom="false" :labelStyle="labelStyle" label-position="top"
				label="开户银行" prop="bankopen">
				<u-input class="input" placeholder="请输入开户银行" v-model="model.bankopen" type="text"></u-input>
			</u-form-item>
			<u-form-item label-width="120" :borderBottom="false" :labelStyle="labelStyle" label-position="top"
				label="具体支行" prop="bankname">
				<u-input class="input" placeholder="请输入具体支行" v-model="model.bankname" type="text"></u-input>
			</u-form-item>
			<u-form-item label-width="120" :borderBottom="false" :labelStyle="labelStyle" label-position="top"
				label="银行卡号" prop="bankcard">
				<u-input class="input" placeholder="请输入银行卡号" v-model="model.bankcard" type="text"></u-input>
			</u-form-item>
		</u-form>
		<view class="hint">
			<image src="../static/p1.png" mode=""></image>
			<view class="text">
				<text>账户名称、开户银行、具体支行、开户账号</text>均为必 填信息,请确认无误后再点击提交
			</view>
		</view>
		<u-button :customStyle="{background: '#FB683D'}" @click="submit" type="primary" class="b1">确认提交</u-button>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				model: {
					username: '',
					bankname: '',
					bankcard: '',
					bankopen: ''
				},
				labelStyle: {
					fontSize: '36rpx',
					fontWeight: 'bold'
				},
				rules: {
					username: [{
						required: true,
						message: '请输入帐户名称',
						trigger: 'blur',
					}, ],
					bankname: [{
						required: true,
						message: '请输入具体支行',
						trigger: 'blur',
					}, ],
					bankcard: [{
						required: true,
						message: '请输入银行卡号',
						trigger: 'blur',
					}, ],
					bankopen: [{
						required: true,
						message: '请输入开户银行',
						trigger: 'blur',
					}, ],
				},
				border: false,
				check: false,
				selectStatus: 'close',
				errorType: ['message'],
			};
		},
		onLoad() {
			than = this;
			than.post('api/Address/bankDetails', null, function(data) {
				if (data) {
					than.model = data;
				}
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						than.post('api/Address/userBank', than.model, function(data) {
							than.toast("成功")
							setTimeout(function() {
								uni.navigateBack()
							}, 1500);
						})
					}
				});
			},
		}
	};
</script>

<style lang="less">
	.wrap {
		padding: 0 36rpx;
	}

	page {
		background: #FAFAFA;
	}

	.b1 {
		width: 245rpx;
		height: 74rpx;
		background: #FB683D;
		border-radius: 20rpx;
	}

	.hint {
		display: flex;
		margin: 50rpx 0;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 13rpx;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;

			text {
				color: #0176FE;
			}

			width: 623rpx;
		}
	}


	.input {
		display: flex;
		align-items: center;
		padding: 0 25rpx !important;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
